<template>
  <div class="AboutUs">
    <img class="titleImg" src="@/assets/img/headerImg.png" alt="">
    <div class="AboutUs-main">
      <div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#FFFFFF"
          text-color="#323232"
          active-text-color="#92282A">
          <el-menu-item index="1">公司简介</el-menu-item>
          <el-menu-item index="2">企业文化</el-menu-item>
          <el-menu-item index="3">团队介绍</el-menu-item>
        </el-menu>
      </div>
      <div class="companyProfile company" :class="companyShow?'synopsisShow':''">
        <div class="synopsis-moduleOne">
          <img src="@/assets/img/synopsis.png" alt="">
          <div class="synopsis-module-content">
            <div>
              <p>品牌介绍</p>
              <p>Brand introduction</p>
            </div>
            <p class="synopsis-module-content-font">
              既然他们要动用江湖势力，我就让他们知道，这个江湖谁做主！——梅长苏
              出自《琅琊榜》梅长苏梅宗主，七万赤焰英魂天地为墓，逃过一死的少帅林殊从地狱归来，一身疾病生不如死。他虽手无缚鸡之力，却掌管天下第一大宗江左盟，
              手下高手无数。化名梅长苏，看似潇洒随意间，就除去了太子和誉王手下得力干将。
            </p>
          </div>
        </div>
        <div class="synopsis-moduleTwo">
          <img src="@/assets/img/synopsis.png" alt="">
          <div class="synopsis-module-content">
            <div>
              <p>品牌释义</p>
              <p>Brand meanig</p>
            </div>
            <p class="synopsis-module-content-font">
              通过旅行，我们可以确信，即各民族之间是有国界，而人的愚蠢行为是没有国界的。我是约翰，我是旅游达人，想了解更多我的旅游经验，
              点击关注我。通过旅行，我们可以确信，即各民族之间是有国界，而人的愚蠢行为是没有国界的。我是约翰，我是旅游达人，想了解更多我的旅游经验，点击关注我
            </p>
          </div>
        </div>
          <div class="synopsis-module-position">
            <div>
              <p>品牌定位</p>
              <P>Brand positioning</P>
            </div>
          </div>
          <div class="synopsis-position-main">
            <div>
            <img src="@/assets/icon/p1.png" alt="">
            <p>影视投资</p>
          </div>
            <div>
              <img src="@/assets/icon/p2.png" alt="">
              <p>影视宣发</p>
            </div>
            <div>
              <img src="@/assets/icon/p3.png" alt="">
              <p>票务预售</p>
            </div>
            <div>
              <img src="@/assets/icon/p4.png" alt="">
              <p>衍生品销售</p>
            </div>
          </div>
        </div>
      <div class="companyProfile culture" :class="cultureShow?'cultureShow':''">
        <div class="culture-moduleOne">
          <img src="@/assets/img/culture1.png" alt="">
          <div>
            <p>
              挡我路的人，我会让谢文东三个字成为你永远的噩梦
            </p>
            <p>
              出自黑道小说《坏蛋是怎么炼成的》，“我非英雄，广目无双，我本坏蛋，无限嚣张”，谢文东的狠和霸气是公认的。弱肉强食的环境之下，谁最狠，谁就能笑到最后。谢文东是书中黑道第一人，讲义气够兄弟，为了发展就要不断壮大，这句语录就是谢文东实力的真实写照，确实霸气嚣张！

              出自《最强反套路系统》徐缺，要说霸气和嚣张，当然少不了炸天帮。什么是炸天帮？炸天帮就是狂拽酷炫炸天帮，炸天出征，寸草不生，炸天一现，只剩针线！这就是炸天帮。本书徐缺的嚣张语录实在是太多了，连断水流大师兄那句“我不是针对你，我是说在场的各位都是垃圾”都被引用，堪称一霸。
            </p>
          </div>
        </div>
        <div class="culture-moduleTwo">
          <div>
          <img src="@/assets/img/culture2.png" alt="">
          <p>如果当初我勇敢，结局是不是不一样。如果当时你坚持，回忆会不会不这样。</p>
        </div>
          <div>
            <img src="@/assets/img/culture2.png" alt="">
            <p>如果当初我勇敢，结局是不是不一样。如果当时你坚持，回忆会不会不这样。</p>
          </div>
          <div>
            <img src="@/assets/img/culture2.png" alt="">
            <p>如果当初我勇敢，结局是不是不一样。如果当时你坚持，回忆会不会不这样。</p>
          </div>
        </div>
      </div>
      <div class="companyProfile team" :class="teamShow?'teamShow':''">
        <el-row :gutter="40">
          <el-col :span="8" v-for="(item,index) in teamList" :key="index">
            <div class="businessCard">
              <div class="businessCard-figure">
                <img :src="$api.picPre + item.pic" alt="">
                <div class="figure-title">
                  <p>{{item.name}}</p>
                  <span>{{item.position}}</span>
                </div>
              </div>
              <div class="businessCard-introduce">
                <div>
                  <p>{{item.name}}</p>
                  <span>{{item.position}}</span>
                </div>
                <p class="businessCard-introduce-font">{{item.intro}}</p>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="6"
          @current-change="handleCurrentChange"
          :total="pagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'company',
  data () {
    return {
      activeIndex: '1',
      teamList: [],
      companyShow: true,
      cultureShow: false,
      teamShow: false,
      pagination: {
        current: 1,
        pageSize: 6,
        total: 0
      }
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.pagination.current = val
      this.getTeamList()
    },
    handleSelect (key, keyPath) {
      switch (key) {
        case '1':
          this.companyShow = true
          this.cultureShow = false
          this.teamShow = false
          break
        case '2':
          this.companyShow = false
          this.cultureShow = true
          this.teamShow = false
          break
        case '3':
          this.companyShow = false
          this.cultureShow = false
          this.teamShow = true
          break
      }
    },
    getTeamList () {
      this.$ajax
        .get(this.$api.getTeamList, {
          page_size: this.pagination.pageSize,
          page: this.pagination.current
        })
        .then(res => {
          console.log(res)
          this.teamList = res.data
          this.pagination.total = res.total_count
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'warning'
          })
        })
    }
  },
  created () {
    this.getTeamList()
  }
}
</script>
<style scoped lang="scss">
.AboutUs{
  .titleImg{
    width: 100%;
  }
  .AboutUs-main{
    width: 1200px;
    margin: 0 auto 64px;
    position: relative;
    top: -54px;
    .companyProfile{
      display: none;
    }
    .synopsisShow{
      display: block;
    }
    .cultureShow{
      display: block;
    }
    .teamShow{
      display: block;
    }
    .company{
      padding: 130px 0 0;
      .synopsis-moduleOne{
        width: 100%;
        position: relative;
        margin-bottom: 51px;
        img{
          width: 400px;
          height: 300px;
        }
      }
      .synopsis-module-content{
        border: 2px solid #92282A;
        width: 830px;
        position: absolute;
        top: 98px;
        left: 370px;
        padding: 41px 104px 43px;
        box-sizing: border-box;
        div{
          position: absolute;
          top: -60px;
          padding: 0 29px;
          background-color: #FFFFFF;
          p:first-child{
            font-size: 24px;
            color: #333333;
          }
          p:last-child{
            font-size: 22px;
            color: #333333;
            margin-top: 24px;
          }
        }
        .synopsis-module-content-font{
          color: #666666;
          font-size: 16px;
          line-height: 27px;
        }
      }
      .synopsis-moduleTwo{
        width: 100%;
        position: relative;
        display: flex;
        justify-content: flex-end;
        img{
          width: 400px;
          height: 300px;
        }
        .synopsis-module-content{
          top: 98px;
          left: 0;
        }
      }
      .synopsis-module-position{
        @include flex_content();
        @include flex_justify_center();
        margin-top: 100px;
        p:first-child{
          font-size: 24px;
          color: #333333;
        }
        p:last-child{
          font-size: 22px;
          color: #333333;
          margin-top: 24px;
        }
      }
      .synopsis-position-main{
        margin-top: 79px;
        @include flex_content();
        @include flex_justify_space();
        div{
          text-align: center;
          p{
            font-size: 16px;
            color: #323232;
            font-weight:400;
            margin-top: 30px;
          }
        }
      }
    }
    .culture-moduleOne{
      padding-top: 128px;
      @include flex_content();
      img{
        width: 582px;
        height: 320px;
      }
      div{
        margin-left: 96px;
        margin-top: 32px;
        p:first-child{
          font-size: 18px;
          color: #323232;
        }
        p:last-child{
          font-size: 14px;
          color: #323232;
          margin-top: 35px;
          line-height: 26px;
        }
      }
    }
    .culture-moduleTwo{
      margin-top: 96px;
      @include flex_content();
      @include flex_justify_space();
      div{
        width: 373px;
        img{
          width: 373px;
          height: 242px;
        }
        p{
          color: #323232;
          font-size: 14px;
          line-height: 24px;
          margin-top: 20px;
        }
      }
    }
    .team{
      width: 100%;
      .businessCard{
        width: 373px;
        height: 525px;
        margin-top: 81px;
        position: relative;
        .businessCard-figure{
          img{
            width: 373px;
            height: 525px;
          }
          div{
            width: 100%;
            height: 88px;
            background:rgba(19,19,19,0.3);
            color: #FFFFFF;
            position: absolute;
            bottom: 0;
            @include flex_content;
            @include flex_align_center;
            p{
              font-size: 22px;
              margin-left: 20px;
            }
            span{
              font-size: 18px;
              margin-left: 29px;
              margin-top: 4px;
            }
          }
        }
        .businessCard-introduce{
          width: 373px;
          height: 525px;
          display: none;
          background:rgba(146,40,42,0.5);
          padding: 127px 20px 0;
          box-sizing: border-box;
          position: absolute;
          top: 0;
          color: #FFFFFF;
          div{
            @include flex_content;
            @include flex_align_center;
            border-bottom: 1px dotted #FFFFFF;
            padding-bottom: 19px;
            margin-bottom: 30px;
            p{
              font-size: 22px;
            }
            span{
              font-size: 18px;
              margin-left: 29px;
              margin-top: 4px;
            }
          }
          .businessCard-introduce-font{
            font-size: 14px;
            line-height: 28px;
          }
        }
      }
      .businessCard:hover{
        cursor: pointer;
        .figure-title{
          display: none;
        }
        .businessCard-introduce{
          display: block;
        }
      }
    }
  }
}
</style>
